<template>
  <div class="content-card table-card">
    <a-table
      bordered
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :locale="zhCN"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'completion'">
          {{ text }}%
        </template>
        <template v-if="column.dataIndex === 'name'">
          <a @click="$emit('name-click', record)">{{ text }}</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN'

defineProps<{
  columns: any[]
  dataSource: any[]
  pagination: any
}>()

defineEmits<{
  'name-click': [record: any]
}>()
</script>

<style scoped>
.table-card {
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

:deep(.ant-table-wrapper) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-spin-nested-loading) {
  flex: 1;
}

:deep(.ant-spin-container) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table) {
  flex: 1;
}

:deep(.ant-table-pagination) {
  padding: 16px 24px;
  margin: 0 !important;
  background: white;
  border-top: 1px solid #f0f0f0;
}

:deep(.ant-table-thead > tr > th) {
  background: #e9f0ff !important;
  font-weight: bold;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 12px 8px;
}
</style> 